<template>
  <a-config-provider>
    <a-layout class="layout-container">
      <!-- 侧边栏 -->
      <a-layout-sider v-model:collapsed="collapsed" collapsible>
        <div class="logo">后台管理</div>
        <a-menu
          theme="dark"
          mode="inline"
          v-model:selectedKeys="selectedKeys"
          @click="handleMenuClick"
        >
          <a-menu-item key="dashboard">
            <dashboard-outlined />
            <span>仪表盘</span>
          </a-menu-item>
          <a-menu-item key="data-collection">
            <database-outlined />
            <span>数据采集</span>
          </a-menu-item>
          <a-menu-item key="data-analysis">
            <bar-chart-outlined />
            <span>数据分析</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>

      <a-layout>
        <!-- 顶部导航 -->
        <a-layout-header class="header">
          <a-space>
            <a-button type="link">
              <user-outlined />
              管理员
            </a-button>
            <a-button type="link" @click="handleLogout">
              <logout-outlined />
              退出
            </a-button>
          </a-space>
        </a-layout-header>

        <!-- 内容区域 -->
        <a-layout-content class="layout-content">
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-config-provider>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  DashboardOutlined,
  DatabaseOutlined,
  BarChartOutlined,
  UserOutlined,
  LogoutOutlined
} from '@ant-design/icons-vue'

export default defineComponent({
  name: 'App',
  components: {
    DashboardOutlined,
    DatabaseOutlined,
    BarChartOutlined,
    UserOutlined,
    LogoutOutlined
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const collapsed = ref(false)
    const selectedKeys = ref(['dashboard'])

    // 监听路由变化，更新选中的菜单项
    watch(
      () => route.name,
      (newName) => {
        if (newName) {
          selectedKeys.value = [newName.toString()]
        }
      },
      { immediate: true }
    )

    // 处理菜单点击
    const handleMenuClick = ({ key }: { key: string }) => {
      router.push({ name: key })
    }

    // 处理退出
    const handleLogout = () => {
      router.push('/login')
    }

    return {
      collapsed,
      selectedKeys,
      handleMenuClick,
      handleLogout
    }
  }
})
</script>

<style>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

#app {
  height: 100%;
  width: 100%;
}

.layout-container {
  min-height: 100vh;
}

.logo {
  height: 32px;
  margin: 16px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 32px;
}

.header {
  background: #fff;
  padding: 0 24px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
}

.layout-content {
  margin: 24px;
  padding: 24px;
  background: #fff;
  min-height: 280px;
  border-radius: 2px;
}
</style>
